package com.example.listcards // 确保这里的包名与您的项目一致

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.listcards.data.DataSource
import com.example.listcards.model.Topic

// === MainActivity 和其他 Composable 函数保持不变 ===
// ... （MainActivity, PurpleHeaderLabel, TopicGrid, TopicPreview 函数不变） ...

// ------------------------- 修改后的 TopicCard -------------------------
@Composable
fun TopicCard(topic: Topic, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier.fillMaxWidth(), // 让 Card 占据其父级 Row 的最大宽度
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp) // 添加一些阴影效果
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
            // !!! 移除了 heightIn(min = 60.dp) !!! 让 Row 的高度由内容撑起，但图片 column 会使其达到最大高度。
            // !!! 调整 verticalAlignment 为 Top !!! 确保两个 Column 都从顶端开始排列
            ,verticalAlignment = Alignment.Top
        ) {
            // ==================== 左半分：包裹图片的 Column ====================
            Column(
                modifier = Modifier
                    .weight(0.4f) // 示例：让图片占据 Card 宽度的 40%
                    .fillMaxHeight() // !!! 让这个 Column 填充 Card 的整个可用高度 !!!
                // .background(Color.LightGray) // !!! 添加背景以便观察 Column 的范围 !!! (开发调试用，可移除)
                // !!! 移除了 padding(end = 4.dp) !!! 图片紧贴 Row 的右侧分割线
                ,
                horizontalAlignment = Alignment.CenterHorizontally, // 图片在 Column 中居中 (可选)
                verticalArrangement = Arrangement.Center // Optional: If you want to center the image within this column
            ) {
                Image(
                    painter = painterResource(id = topic.imageRes),
                    contentDescription = null,
                    contentScale = ContentScale.Crop, // Crop 保证图片填满区域，可能会裁剪
                    modifier = Modifier
                        .fillMaxSize() // !!! Image 填满其父 Column 的所有可用空间 !!! C
                        // !!! 移除了 size(90.dp) !!!
                        .clip(MaterialTheme.shapes.small) // 可选：给图片添加圆角
                )
            }

            // ==================== 右半分：文本内容 Column ====================
            Column(
                modifier = Modifier
                    .weight(0.6f) // 示例：让文本占据 Card 宽度的 60%
                    .fillMaxHeight() // !!! 让这个 Column 也填充 Card 的整个可用高度 !!!
                    .padding(
                        start = 8.dp,   // 距离左侧图片的间隙
                        top = 16.dp,    // 距离 Card 最顶端 16dp
                        end = 16.dp,    // 距离 Card 最右边 16dp
                        bottom = 8.dp   // 距离 Card 最底部 8dp
                    ),
                verticalArrangement = Arrangement.Top, // 文本内容从顶部开始排列
                horizontalAlignment = Alignment.Start // 文本内容左对齐
            ) {
                // 课程名称
                Text(
                    text = stringResource(id = topic.name),
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier
                        .padding(bottom = 8.dp) // 课程名称和数字之间的距离
                )

                // 点型图案 (Icon) 和 数字 (availableCourses)
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    // modifier = Modifier.fillMaxWidth() // 通常不需要，除非想让这个Row填满整个Card的宽度
                ) {
                    Icon(
                        painter = painterResource(R.drawable.ic_grain), // 假设您有 ic_grain 这个 drawable
                        contentDescription = "Available courses icon",
                        modifier = Modifier
                            .size(16.dp)
                            .padding(end = 8.dp) // 点图案右侧和数字之间的距离
                    )
                    Text(
                        text = topic.availableCourses.toString(),
                        style = MaterialTheme.typography.bodyMedium,
                    )
                }
            }
        }
    }
}


// ------------------------- 以下为保持不变的部分 -------------------------

// === MainActivity ===
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContent {
            Surface(
                modifier = Modifier
                    .fillMaxSize()
                    .statusBarsPadding(), // 状态栏内边距
                color = MaterialTheme.colorScheme.background
            ) {
                // 整体布局，包含顶部标签和主题列表
                Column(modifier = Modifier.fillMaxSize()) {
                    // 1. 顶部紫色标签
                    PurpleHeaderLabel()

                    // 2. 主题格子
                    TopicGrid(
                        modifier = Modifier
                            .weight(1f) // 让 TopicGrid 占据剩余所有可用空间
                            .padding(
                                start = 8.dp,
                                top = 8.dp, // Grid 顶部距离 PurpleHeaderLabel 的底部
                                end = 8.dp,
                                bottom = 8.dp // Grid 底部距离屏幕底部
                            )
                    )
                }
            }
        }
    }
}

// 顶部紫色标签 Composable
@Composable
fun PurpleHeaderLabel() {
    Box(
        modifier = Modifier
            .fillMaxWidth() // 占据整个宽度
            .height(56.dp) // 设置一个合适的高度，例如 56dp
            .background(Color(0xFF7F00FF)) // 紫色背景 (RGB: 127, 0, 255)
            .padding(horizontal = 16.dp), // 水平内边距
        contentAlignment = Alignment.Center // 居中文本
    ) {
        Text(
            text = "课程主题", // 标签文本
            style = MaterialTheme.typography.titleMedium, // 使用一个合适的标题样式
            color = Color.White, // 文本颜色为白色
            textAlign = TextAlign.Center // 文本居中对齐
        )
    }
}

@Composable
fun TopicGrid( modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2), // 每行 2 列
        verticalArrangement = Arrangement.spacedBy(8.dp), // Card-to-Card 垂直间距
        horizontalArrangement = Arrangement.spacedBy(8.dp), // Card-to-Card 水平间距
        modifier = modifier
    ) {
        items(DataSource.topics) { topic ->
            TopicCard(topic)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun TopicPreview() {
    // 确保您的 data.DataSource 和 model.Topic 类是可用的
    // 并且 res/values/strings.xml 中有 R.string.photography 等字符串资源
    // 并且 res/drawable 文件夹中有 R.drawable.photography 等图片资源
    val topic = Topic(R.string.photography, 321, R.drawable.photography)
    Column( // 用于预览的 Column
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        PurpleHeaderLabel() // 预览顶部标签
        Spacer(modifier = Modifier.height(8.dp)) // 模拟 Grid 和标签之间的间距
        TopicCard(topic = topic, modifier = Modifier.padding(8.dp)) // 预览 Card，并添加 Card 间的 padding
    }
}